<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Reverse Proxy, Open Source, Aroz, Go, OS, NAS, Cloud" name="keywords">
    <meta content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox" name="description">
    <meta name="author" content="tobychui">

    <!-- HTML Meta Tags -->
    <title>Homelab Gateway | Zoraxy</title>
    <meta name="description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="https://zoraxy.aroz.org/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Hello Zoraxy">
    <meta property="og:description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">
    <meta property="og:image" content="https://zoraxy.aroz.org/img/og.png">

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="os.aroz.org">
    <meta property="twitter:url" content="https://zoraxy.aroz.org/">
    <meta name="twitter:title" content="Hello Zoraxy">
    <meta name="twitter:description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">
    <meta name="twitter:image" content="https://zoraxy.aroz.org/img/og.png">

    <!-- JavaScript Libs-->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="dom-i18n.min.js"></script>
    <link href="main.css" rel="stylesheet">

    <!-- Css stuffs-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.3/semantic.min.js" integrity="sha512-gnoBksrDbaMnlE0rhhkcx3iwzvgBGz6mOEj4/Y5ZY09n55dYddx6+WYc72A55qEesV8VX2iMomteIwobeGK1BQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.3/semantic.min.css" integrity="sha512-3quBdRGJyLy79hzhDDcBzANW+mVqPctrGCfIPosHQtMKb3rKsCxfyslzwlz2wj1dT8A7UX+sEvDjaUv+WExQrA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Favicons -->
    <link href="favicon.png" rel="icon">
    <link href="img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap" rel="stylesheet">

    <!-- AOS.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <div id="backToTopBtn" class="ui big icon button" onclick="backToTop();">
       <i class="ui arrow up icon"></i>
    </div>
    <button id="rwdmenubtn" class="ui black big icon button"><i class="ui bars icon"></i></button>
    <div id="mainmenu" class="ui segment">
        <div class="ui container">
            <div class="ui small stackable secondary menu">
                <div class="item">
                    <img class="ui tiny image" src="img/logo.png">
                </div>
                <a class="item" href="#mainmenu" i18n>
                    Home // 主頁 // Startseite
                </a>
                <a class="item" href="#about" i18n>
                    About Zoraxy // 關於 Zoraxy // Über Zoraxy
                </a>
                <a class="item" href="#features" i18n>
                    Screenshots // 系統截圖 // Bildschirmfotos
                </a>
                <a class="item" href="#techspec" i18n>
                    Videos // 介紹影片 // Videos
                </a>
                <a class="item" href="#download" i18n>
                    Download // 下載 // Herunterladen
                </a>
                <a class="item" href="#learnmore" i18n>
                    Learn More // 了解更多 // Mehr erfahren
                </a>
                <a class="right floated item">
                    <div class="ui small selection dropdown">
                        <input type="hidden" id="language">
                        <div class="default text" style="color: #6cacff;"><i class="language icon"></i> Default</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="en">English</div>
                            <div class="item" data-value="zh">中文（正體）</div>
                            <div class="item" data-value="de">Deutsch</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="messageBanner">
        <div class="ui text container">
            <p i18n>This site is currently under development. Some information might not be ready.
                // 本網站目前仍在開發中，部分資訊可能尚未準備好。
                // Diese Seite ist in Entwicklung. Einige Informationen sind möglicherweise nicht verfügbar.
            </p>
        </div>
    </div>
    <div id="slideshowBanner">
        <div class="title">
            <h1 i18n>Zoraxy</h1>
            <div class="ui divider" style="border-top: 1px solid rgba(255,255,255,0.5); "></div>
            <p i18n>The ultimate homelab networking toolbox for self-hosted services
                // 簡化自家伺服器部署之事，初學者居家網絡必備良器
                // Das ultimative Homelab-Netzwerk-Toolbox für selbstgehostete Dienste
            </p>
            <a href="https://github.com/tobychui/zoraxy/releases" class="ui basic white button" target="_blank"><i style="color:white;" class="ui download icon"></i><span i18n>Download // 立即下載 // Herunterladen </span></a>
            <a href="https://github.com/tobychui/zoraxy" class="ui basic white button" target="_blank"><i style="color: white;" class="ui code icon"></i><span i18n>Source Code // 查看原始碼 // Quellcode</span></a>
            
        </div>
        <div id="wavesWrapper">
            <!-- CSS waves-->
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
                <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
                </g>
            </svg>
        </div>
    </div>
    <br><br><br><br>
    <!-- About ArozOS-->
    <div id="about" class="ui text container">
        <div class="ui stackable grid" data-aos="fade-up">
            <div class="six wide column" align="right">
                <img class="ui medium image" src="img/preview-pc.png">
            </div>
            <div class="ten wide column">
                <div class="about-text-wrapper">
                    <p class="about-title"><b i18n>Reverse Proxy // 反向代理 // Reverse-Proxy</b></p>
                    <p><span i18n>Easy setups with dynamic updates // 讓你想不到般簡單易用、迅速設定、動態更新 // Einfache Einrichtung mit dynamischen Updates</span></p>
                    <p i18n>Access your reverse proxy and self-hosted services from any computer with a browser, anytime, anywhere.
                        // 透過瀏覽器，隨時隨地在任何裝置上存取您的反向代理及自家伺服器服務。
                        // Greifen Sie jederzeit und überall von jedem Gerät aus auf Ihren Reverse-Proxy und selbst gehostete
                    </p>
                    <div class="ui list">
                        <div class="item">
                            <i class="caret right icon"></i>
                            <div class="content" i18n>
                                Simple setups with web UI
                                // 透過網頁介面簡單設定即可使用
                                // Einfache Einrichtung mit Web-UI
                            </div>
                        </div>
                        <div class="item">
                            <i class="caret right icon"></i>
                            <div class="content" i18n>
                                Change settings on the fly without restarting
                                // 即時更改設定，無需重新啟動
                                // Einstellungen ohne Neustart ändern
                            </div>
                        </div>
                        <div class="item">
                            <i class="caret right icon"></i>
                            <div class="content" i18n>
                                One of the best reverse proxy manager for beginners
                                // 可能是最適合初學者的反向代理管理器之一
                                // Einer der besten Reverse-Proxy-Manager für Anfänger
                            </div>
                        </div>
                        <div class="item">
                            <i class="caret right icon"></i>
                            <div class="content" i18n>
                                Easily install plugins and edit configurations
                                // 輕鬆安裝插件並編輯設定
                                // Plugins einfach installieren und Konfigurationen bearbeiten
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui stackable grid" data-aos="fade-up">
            <div class="six wide column" align="right">
                <img class="ui medium image" src="img/preview-mobile.png">
            </div>
            <div class="ten wide column">
                <div class="about-text-wrapper">
                    <p class="about-title"><b i18n>Real-time Analytics // 即時流量分析 // Echtzeit-Analysen</b></p>
                    <p><span i18n>Dynamic statistic and access control // 動態流量數據、權限與路由設定 // Dynamische Statistik und Zugriffskontrolle</span></p>
                    <p i18n>Provide real time statistical overview, take advantage of the real time traffic and situations to make better decisions.
                        // 提供即時統計概覽，利用即時流量和情況做出更好的決策。
                        // Bietet eine Echtzeit-Übersicht über die Statistiken, um bessere Entscheidungen zu treffen.
                    </p>
                    <div class="ui list">
                        <div class="item">
                            <i class="caret right icon"></i>
                            <div class="content" i18n>
                                Real time visitor statistic
                                // 即時訪客統計概覽
                                // Echtzeit-Besucherstatistik
                            </div>
                        </div>
                        <div class="item">
                            <i class="caret right icon"></i>
                            <div class="content" i18n>
                                Instant network utilitization overview
                                // 即時網路使用率概覽
                                // Sofortige Netzwerkübersicht
                            </div>
                        </div>
                        <div class="item">
                            <i class="caret right icon"></i>
                            <div class="content" i18n>
                                No-reload access control and settings
                                // 即時生效存取控制和設定
                                // Zugriffskontrolle und Einstellungen ohne Neustart
                            </div>
                        </div>
                        <div class="item">
                            <i class="caret right icon"></i>
                            <div class="content" i18n>
                                One-click setting change with no downtime
                                // 一鍵設定更改，無需停機
                                // Einstellungsänderung mit einem Klick ohne Ausfallzeiten
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br><br><br><br>
    <!-- Features -->
    <div class="ui divider"></div>
    <div id="features" class="ui container">
        <div class="centered title">
            <h1 i18n>Screenshots 
                // 系統截圖
                // Bildschirmfotos
            </h1>
        </div>
        <div class="ui three column stackable grid">
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/1.png">
            </div>
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/2.png">
            </div>
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/3.png">
            </div>
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/4.png">
            </div>  
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/5.png">
            </div>  
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/6.png">
            </div>
            <!-- <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/7.png">
            </div> -->
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/8.png">
            </div>
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/9.png">
            </div>
            <div class="column">
                <img class="ui fluid image screenshot" src="img/screenshots/10.png">
            </div>
        </div>
        <br><br><br>
    </div>

    <!-- Spec -->
    <div id="techspec" class="blackbanner">
        <br><br>
        <div class="centered title">
            <h1 style="font-weight: 600;" i18n>
                Review Videos 
                // 介紹影片 
                // Videos
            </h1>
        </div>
        <div>
            <div class="videoScrollBar">
                <div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/5-lps8DC6_Y?si=rkfePn9kiYKCvYUZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
                <div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/49xQYLpmedE?si=fgba2iK55s1760Xr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
                <div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/I_F97he5F2A?si=qKEXwDcjkX1nPejq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
                <div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/FNU08-ufByM?si=I2hq9vsapeXB2Oqb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
            </div>   
        </div>
        <br><br><br>
    </div>

    <!-- Download -->
    <div id="download" class="ui text container">
        <br><br>
        <div class="centered title">
            <h1 i18n>
                Download 
                // 下載
                // Herunterladen
            </h1>
        </div>
        
        <div class="downloadTabWrapper">
            <div class="ui top attached fluid stackable tabular menu">
                <a class="active item" data-tab="linux"><i class="grey linux icon"></i> Linux</a>
                <a class="item" data-tab="windows"><i class="blue windows icon"></i> Windows</a>
                <a class="item" data-tab="rpi"><i class="red raspberry pi icon"></i><span i18n>SBCs // ARM 開發板 // SBCs</span></a>
                <a class="item" data-tab="build"><i class="code icon"></i> <span i18n>Build from source // 從原始碼建置 // Aus dem Quellcode erstellen</span> </a>
            </div>
            <div class="ui bottom attached active tab segment" data-tab="linux">
                <p i18n>
                    Install with command line 
                    // 使用 CLI 下載並執行發行版本 
                    // Installieren Sie mit der Befehlszeile
                </p>
                <div class="ui black message">
                    <code>
                        wget https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_amd64<br>
                        chmod +x ./zoraxy_linux_amd64<br>
                        sudo ./zoraxy_linux_amd64
                    </code>
                </div>
                <br>
                <p i18n>
                    Install with precompiled binary 
                    // 下載發行版本 
                    // Installieren Sie mit vorkompilierten Binärdateien
                </p>
                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_amd64");'>
                    <i class="black linux icon"></i> 
                    <span i18n>Download x64 
                        // 下載 64位元 執行檔 
                        // Herunterladen x64
                    </span>
                </button>
                <span style="font-size: 1.2em; font-weight: 600; margin-right: 0.4em">OR</span>
                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_386");'>
                    <i class="black linux icon"></i> 
                    <span i18n>Download x32 
                        // 下載 32位元 執行檔 
                        // Herunterladen x32
                    </span>
                </button>
            </div>
            <div class="ui bottom attached tab segment" data-tab="windows">
                <p i18n>
                    Install with precompiled binary 
                    // 下載發行版本 
                    // Installieren Sie mit vorkompilierten Binärdateien
                </p>
                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_windows_amd64.exe");'>
                    <i class="blue windows icon"></i> 
                    <span i18n>
                        Download Zoraxy for Windows 
                        // 下載 Windows 版 Zoraxy 
                        // Zoraxy für Windows herunterladen
                    </span>
                </button>
                <br><br>
            </div>
            <div class="ui bottom attached tab segment" data-tab="rpi">
                <p i18n>Install with command line (armv6-7, arm64, x86) 
                    // 使用 CLI 下載並執行 （armv6-7, arm64, x86）
                    // Installieren Sie mit der Befehlszeile (armv6-7, arm64, x86)
                </p>
                <div class="ui black message">
                    <code>
                        # Check your CPU architecture<br>
                        uname -m <br>
                        <br>
                        # For arm64 (aarch64) CPU<br>
                        wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_arm64<br>
                        <br>
                        # For armv6 (armv6l) / armv7 (armv7l) CPU<br>
                        wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_arm<br>
                        <br>
                        # For RISC-V (riscv64) CPU<br>
                        wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_riscv64<br>
                        <br>

                        chmod +x ./zoraxy<br>
                        sudo ./zoraxy <br>
                    </code>
                </div>
                <br>
                <p i18n>Install with precompiled binary 
                    // 下載發行版本
                    // Installieren Sie mit vorkompilierten Binärdateien
                </p>
                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_arm");'><i class="black download icon"></i> <span i18n></span>arm (v6, v7)</button>
                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_arm64");'><i class="black download icon"></i> <span i18n></span>arm64</button>
                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_riscv64");'><i class="grey download icon"></i> <span i18n></span>riscv64</button>
            </div>
            <div class="ui bottom attached tab segment" data-tab="build">
                <p i18n>Require Go (Golang) compiler. Details build from source instruction can be found on Zoraxy Github README file. 
                    // 需要 Go (Go 語言）編譯器。建置詳情可以在 Zoraxy Github README 檔案中找到。
                    // Erfordert den Go (Golang) Compiler. Detaillierte Anweisungen zum Erstellen aus dem Quellcode finden Sie in der Zoraxy Github README-Datei.
                </p>
                <div class="ui black message">
                    <code>
                        git clone https://github.com/tobychui/zoraxy<br>
                        cd ./zoraxy/src/<br>
                        go mod tidy<br>
                        go build<br>
                        sudo ./zoraxy <br>
                    </code>
                </div>
            </div>
        </div>
        <p>
            <span i18n>After Zoraxy is started, navigate to 
                // 當 Zoraxy 執行檔 / 服務啟動後，使用瀏覽器開啟
                // Nachdem Zoraxy gestartet wurde, navigieren Sie zu
            </span> 
            <a href="http://localhost:8000" target="_blank">http://localhost:8000</a> 
            <span i18n>to continue account and system setup. 
                // 以繼續帳戶和系統設定。
                // um die Konto- und Systemeinrichtung fortzusetzen.
            </span>
        </p>
        <br><br>
    </div>

    <!-- Learn More -->
    <div class="ui divider"></div>
    <div id="learnmore" class="ui text container">
        <div class="centered title" style="margin-bottom: 0px;">
            <h1 i18n>Learn More 
                // 了解更多
                // Mehr erfahren
            </h1>
            <p i18n>If you like this project, please feel free to give us a ⭐ star ⭐.
                // 如果您喜歡這個開源專案，歡迎來給我們一顆 ⭐星星⭐ 喔！!
                // Wenn Ihnen dieses Projekt gefällt, geben Sie uns bitte einen ⭐ Stern ⭐.
            </p>
        </div>
        <div class="ui basic segment linkicons">
            <div class="ui big breadcrumb">
                <a class="section externallink" href="https://github.com/tobychui/zoraxy" target="_blank">
                    <div class="ui icon header">
                        <i class="black github icon"></i>
                        <div class="content" i18n>
                            Github
                            // 源碼
                            // Quellcode
                        </div>
                    </div>
                </a>
                <i class="divider"> </i>
                <a class="section externallink" href="https://zoraxy.aroz.org/plugins/html/" target="_blank">
                    <div class="ui icon header">
                        <i class="green code icon"></i>
                        <div class="content" i18n>
                            Plugin Devs
                            // 插件開發
                            // Plugin-Entwickler
                        </div>
                    </div>
                </a>
                <i class=" divider"> </i>
                <a class="section externallink" href="mailto:toby@imuslab.com" target="_blank">
                    <div class="ui icon header">
                        <i class="yellow mail icon"></i>
                        <div class="content" i18n>
                            Email
                            // 電子郵件
                            // E-Mail
                        </div>
                    </div>
                </a>
                <i class=" divider"> </i>
                <a class="section externallink" href="https://t.me/ArOZBeta" target="_blank">
                    <div class="ui icon header">
                        <i class="blue telegram icon"></i>
                        <div class="content">
                            Telegram
                        </div>
                    </div>
                </a>
            </div>  
        </div>
        <br><br><br><br>
    </div>

     <!-- Footer -->
     <div id="footer">
        <div class="ui container">
            <br><br>
            <div class="ui stackable grid" style="height: 100%;">
                <div class="six wide column" style="height: 100%;">
                    <a href="https://zoraxy.aroz.org"><img src="img/logo_white.png" class="ui small image"></a>
                    <p><span style="font-weight: 300;">The Zoraxy Project</span><br>
                        © Toby Chui</p>
                       
                    <div class="bottom-attach">
                       <br><br>
                        <div class="ui breadcrumb" style="margin-top: 0.4em;">
                            <div class="section" i18n><a style="color: white;" href="https://zoraxy.aroz.org" target="_blank">zoraxy.aroz.org</a></div>
                            <div class="divider"> / </div>
                            <div class="section">2018 - <span class="year">now</span></div>
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <div class="ui list">
                        <div class="item title" i18n>Developer Tools 
                            // 開發者工具
                            // Entwicklerwerkzeuge
                        </div>
                        <div class="item"><a href="https://github.com/tobychui/zoraxy/wiki" target="_blank">Zoraxy Wiki</a></div>
                        <div class="item"><a href="https://github.com/tobychui/zoraxy" target="_blank">Source Code</a></div>
                        <div class="item"><a href="https://github.com/aroz-online/zoraxy-official-plugins" target="_blank">Offical Plugin List</a></div>
                        <div class="item"><a href="https://zoraxy.aroz.org/plugins/html/" target="_blank">Plugin Development Guide</a></div>
                    </div>
                </div>	
                <div class="three wide column">
                    <div class="ui list">
                        <div class="item title" i18n>Project Spin-offs 
                            // 衍生開源計劃
                            // Projekt-Ableger
                        </div>
                        <div class="item"><a href="https://os.aroz.org" target="_blank">ArozOS</a></div>
                    </div>
                </div>
                <div class="three wide column">
                    <div class="ui list">
                        <div class="item title" i18n>Related Links 
                            // 相關連接
                            // Verwandte Links
                        </div>
                        <div class="item"><a href="https://github.com/tobychui/zoraxy/wiki/Getting-Started" target="_blank" i18n>Getting Started</a></div>
                        <div class="item"><a href="https://github.com/tobychui/zoraxy/releases" target="_blank">Zoraxy Release</a></div>
                        <div class="item"><a href="https://hub.docker.com/r/zoraxydocker/zoraxy" target="_blank">Zoraxy Docker</a></div>
                        <div class="item"><a href="https://imuslab.com" target="_blank">imuslab</a></div>
                    </div>
                </div>
            </div>
        </div>
        <br><br><br><br>
    </div>
    
    <script>
        AOS.init();
        $(".year").text(new Date().getFullYear());

        // Function to open the modal with the clicked image using jQuery
        function openModal(src) {
            // Remove the old modal if it exists
            $('#imageModal').remove();

            const modal = $('<div style="display:none;">', { id: 'imageModal' }).css({
                position: 'fixed',
                top: '0',
                left: '0',
                width: '100%',
                height: '100%',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: '1000'
            });

            const img = $('<img>', { src: src }).css({
                maxWidth: '80%',
                maxHeight: '80%',
                boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)'
            });

            modal.append(img);
            $("body").css("overflow", "hidden");

            modal.on('click', function() {
                modal.remove();
                $("body").css("overflow", "auto");
            });

            $('body').append(modal);
        }

        // Add click event listener to all screenshot images using jQuery
        $('.screenshot').on('click', function() {
            openModal($(this).attr('src'));
        });
    </script>
    <!-- Locales -->
    <script src="main.js" defer></script>
  </body>
</html>